<template>
  <div class="hot-article">
    <div class="article-label">
      {{ $t('trending') }}<img src="@/assets/images/home-title-label.png"/>
    </div>
    <div class="article-view">
      <div
        class="article-item"
        @click="$goDetail(atc.id)"
        v-for="(atc, adx) in $store.state.hotArticle"
        :key="adx"
      >
        <span>{{ adx + 1 < 10 ? `0${adx + 1}` : adx + 1 }}</span
        >{{ atc.title }}
        <img src="@/assets/images/hot-num-bg.png" alt=""/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.h5 {
  .hot-article {
    padding: fw(20vw, h5) !important;

    .article-view .article-item {
      width: 80vw !important;

      img {
        width: fw(14vw, h5);
        left: fw(2vw, h5);
        top: fh(2vh, h5);
      }
    }

    .article-label {
      img {
        width: fw(24vw, h5) !important;
        bottom: fh(-8vh, h5) !important;
        right: fw(-6vw, h5) !important;
      }
    }
  }
}

.hot-article {
  width: 100%;
  padding: fh(30vh, pc) fw(30vw, pc);
  background-color: $fh90;
  margin-top: 0 !important;

  .article-label {
    color: $zh;
    position: relative;
    display: inline-block;
    font-size: fh(24vh, pc);
    font-weight: 800;
    margin-top: fh(20vh, pc);
    margin-bottom: fh(46vh, pc);

    img {
      position: absolute;
      bottom: fh(-12vh, pc);
      right: fw(-12vw, pc);
      width: fw(42vw, pc);
    }

    &::after {
      display: none !important;
      content: "";
      position: absolute;
      bottom: fh(-16vh, pc);
      right: fw(-12vw, pc);
      width: fw(30vw, pc);
      height: fh(18vh, pc);
      border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
      border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
    }
  }

  .article-view {
    color: $sh;

    .article-item {
      position: relative;
      width: fw(485vw, pc);
      line-height: fh(26vh, pc);
      margin-bottom: fh(20vh, pc);
      overflow: hidden;
      // text-overflow: ellipsis;
      //word-break: break-all; /*在任何地方换行*/
      word-wrap: break-word;
      word-break: break-word;
      overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
      height: fh(25vh, pc);
      font-size: fh(16vh, pc);

      span {
        color: $zh;
        font-size: fh(18vh, pc);
        font-weight: bold;
        display: inline-block;
        padding-right: fw(16vw, pc);
      }

      img {
        position: absolute;
        left: fw(8vw, pc);
        width: fw(18vw, pc);
        top: fh(3vh, pc);
      }

      &:hover {
        opacity: 0.8;
        cursor: pointer;
        color: $zh;
      }
    }
  }
}
</style>
